<template>
  <button @click="show = !show">显示/隐藏</button>
  <transition name="fade" class="dv">
  <div v-if="show">Hello,Vue3</div>
 </transition>

</template>

<script setup>
import { ref } from "vue";

let show = ref(false);
</script>

<style>
.dv {
  margin-top: 20px;
  padding: 30px;
  background-color: blanchedalmond;
  color: blueviolet;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}


</style>
